<template>
 <div class="detail-container">
   <el-steps :space="200" :active="1" align-center finish-status="success">
     <el-step title="提交订单"></el-step>
     <el-step title="支付订单"></el-step>
     <el-step title="平台发货"></el-step>
     <el-step title="确认收货"></el-step>
     <el-step title="完成评价"></el-step>
   </el-steps>
   <el-card shadow="never" class="margin-top-20">
     <div class="operate-container">
       <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
       <span class="color-danger">当前订单状态：已关闭</span>
       <div class="operate-button-container" >
         <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
         <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
       </div>
     </div>
     <div style="margin-top: 20px">
       <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
       <span class="font-small">基本信息</span>
     </div>
     <div class="table-layout">
       <el-row>
         <el-col :span="4" class="table-cell-title">订单编号</el-col>
         <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
         <el-col :span="4" class="table-cell-title">用户账号</el-col>
         <el-col :span="4" class="table-cell-title">支付方式</el-col>
         <el-col :span="4" class="table-cell-title">订单来源</el-col>
         <el-col :span="4" class="table-cell-title">订单类型</el-col>
       </el-row>
       <el-row>
         <el-col :span="4" class="table-cell">20190424100064</el-col>
         <el-col :span="4" class="table-cell">12</el-col>
         <el-col :span="4" class="table-cell">sp</el-col>
         <el-col :span="4" class="table-cell">微信</el-col>
         <el-col :span="4" class="table-cell">网购</el-col>
         <el-col :span="4" class="table-cell">正常订单</el-col>
       </el-row>
       <el-row>
         <el-col :span="4" class="table-cell-title">配送方式</el-col>
         <el-col :span="4" class="table-cell-title">物流单号</el-col>
         <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
         <el-col :span="4" class="table-cell-title">订单可得优币</el-col>
         <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>
         <el-col :span="4" class="table-cell-title">活动信息</el-col>
       </el-row>
       <el-row>
         <el-col :span="4" class="table-cell">暂无</el-col>
         <el-col :span="4" class="table-cell">暂无</el-col>
         <el-col :span="4" class="table-cell">15天</el-col>
         <el-col :span="4" class="table-cell">648</el-col>
         <el-col :span="4" class="table-cell">648</el-col>
         <el-col :span="4" class="table-cell">
           <!--<el-popover-->
             <!--placement="top-start"-->
             <!--title="活动信息"-->
             <!--width="200"-->
             <!--trigger="hover"-->
             <!--:content="order.promotionInfo">-->
             <!--<span slot="reference">{{order.promotionInfo | formatLongText}}</span>-->
           <!--</el-popover>-->
           活动信息
         </el-col>
       </el-row>
       <div style="margin-top: 20px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">收货人信息</span>
       </div>
       <div class="table-layout">
         <el-row>
           <el-col :span="6" class="table-cell-title">收货人</el-col>
           <el-col :span="6" class="table-cell-title">手机号码</el-col>
           <el-col :span="6" class="table-cell-title">邮政编码</el-col>
           <el-col :span="6" class="table-cell-title">收货地址</el-col>
         </el-row>
         <el-row>
           <el-col :span="6" class="table-cell">Szp</el-col>
           <el-col :span="6" class="table-cell">15576644418</el-col>
           <el-col :span="6" class="table-cell">410000</el-col>
           <el-col :span="6" class="table-cell">湖南长沙</el-col>
         </el-row>
       </div>
       <div style="margin-top: 60px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">商品信息</span>
       </div>
       <el-table
         :data="tableData"
         border
         style="width: 100%;margin-top: 20px"
         >
         <el-table-column
           label="商品图片"
           width="120">
           <template slot-scope="scope">
             <img :src="scope.row.picture" style="height: 80px">
           </template>
         </el-table-column>
         <el-table-column
           label="商品名称"
         >
           <template slot-scope="scope">
             <p> {{scope.row.name}}</p>
             <p> {{scope.row.name}}</p>
           </template>
         </el-table-column>
         <el-table-column
           label="价格/货物"
           width="120"
         >
           <template slot-scope="scope">
           ¥ {{scope.row.price}}
         </template>
         </el-table-column>
         <el-table-column
           prop="status"
           label="属性"
           width="120"
         >
         </el-table-column>
         <el-table-column
           prop="number"
           label="数量"
           width="120"
         >
         </el-table-column>
         <el-table-column
           prop="total"
           label="小记"
           width="120"
         >
         </el-table-column>
       </el-table>
       <div style="margin-top: 20px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">操作信息</span>
       </div>
       <el-table style="margin-top: 20px;width: 100%"
                 ref="orderHistoryTable"
                 :data="tableData" border>
         <el-table-column label="操作者"  width="120" align="center">
           <template slot-scope="scope">
             {{scope.row.name}}
           </template>
         </el-table-column>
         <el-table-column label="操作时间"  width="160" align="center">
           <template slot-scope="scope">
             {{formatTime(scope.row.number)}}
           </template>
         </el-table-column>
         <el-table-column label="订单状态"  width="120" align="center">
           <template slot-scope="scope">
             {{scope.row.status}}
           </template>
         </el-table-column>
         <el-table-column label="付款状态"  width="120" align="center">
           <template slot-scope="scope">
             {{scope.row.status}}
           </template>
         </el-table-column>
         <el-table-column label="发货状态"  width="120" align="center">
           <template slot-scope="scope">
             {{scope.row.number}}
           </template>
         </el-table-column>
         <el-table-column label="备注" align="center">
           <template slot-scope="scope">
             {{scope.row.price}}
           </template>
         </el-table-column>
       </el-table>
       <div style="margin-top: 60px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">费用信息</span>
       </div>
       <div class="table-layout">
         <el-row>
           <el-col :span="6" class="table-cell-title">商品合计</el-col>
           <el-col :span="6" class="table-cell-title">运费</el-col>
           <el-col :span="6" class="table-cell-title">优惠券</el-col>
           <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
         </el-row>
         <el-row>
           <el-col :span="6" class="table-cell">￥648</el-col>
           <el-col :span="6" class="table-cell">￥12</el-col>
           <el-col :span="6" class="table-cell">-￥328</el-col>
           <el-col :span="6" class="table-cell">-￥128</el-col>
         </el-row>
         <el-row>
           <el-col :span="6" class="table-cell-title">活动优惠</el-col>
           <el-col :span="6" class="table-cell-title">折扣金额</el-col>
           <el-col :span="6" class="table-cell-title">订单总金额</el-col>
           <el-col :span="6" class="table-cell-title">应付款金额</el-col>
         </el-row>
         <el-row>
           <el-col :span="6" class="table-cell">-￥328</el-col>
           <el-col :span="6" class="table-cell">-￥328</el-col>
           <el-col :span="6" class="table-cell">
             <span class="color-danger">￥328</span>
           </el-col>
           <el-col :span="6" class="table-cell">
             <span class="color-danger">￥328</span>
           </el-col>
         </el-row>
       </div>
     </div>
   </el-card>
 </div>
</template>

<script>
  export default {
    name: "orderListDetail",
    data () {
      return {
        tableData: [{
          picture: '',
          name: '华为',
          price: '111',
          status: '暂无',
          number: '1',
          total: '328'
        }],
      }
    },
    methods: {
      handleDeleteOrder(){
        console.log(2)
      },
      showMarkOrderDialog (){
        console.log(1)
      }
    }
  }
</script>

<style scoped>
  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .detail-container{
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }
  .margin-top-20{
    margin-top: 20px;
  }
  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }
  .operate-button-container {
    float: right;
    margin-right: 20px
  }
</style>
